<template>
    <!-- 侧边弹框 -->
    <el-drawer
        class="drawer_basic_info"
        :visible.sync="drawer"
        size="652px"
        :modal-append-to-body="false">
        <el-tag class="questionnaire_return" v-if="is_show_return" @click="return_basic_info">返回</el-tag>
        <basicInfo v-if="drawer" @returnDrawer="returnDrawer" @showQuestionnaireDetail="showQuestionnaireDetail" :is_supplement="is_supplement"/>
    </el-drawer>
</template>

<script>
    import basicInfo from './basic_info';
    import bus from '../assets/js/eventBus';
    export default {
        components:{
            basicInfo
        },
        data() {
            return {
                drawer:false,  //是否显示侧边弹框   true-显示  false-隐藏
                is_supplement:false,   //是否显示补填按钮   true-显示  false-隐藏
                info_title:'基础信息',
                is_show_return:false   //是否显示返回按钮
            }
        },
        created(){
            let that = this;
            bus.$on('get_doctor_info',(res)=>{
                that.drawer = res.is_drawer;
                that.is_supplement = res.is_supplement;
                that.info_title = '基础信息';
            });
        },
        mounted(){
            
        },
        methods: {
            //拜访登记
            returnDrawer(value){
                this.drawer = value;
                bus.$emit('isPhoneCall', true);
            },
            //查看问卷详情
            showQuestionnaireDetail(){
                this.info_title = '查看';
                this.is_show_return = true;
                //基本信息-隐藏x
                document.getElementsByClassName('el-drawer__close-btn')[0].className = 'el-drawer__close-btn hide_close_button';
            },
            //返回基本信息
            return_basic_info(){
                this.info_title = '基础信息';
                this.is_show_return = false;
                //基本信息-显示x
                document.getElementsByClassName('el-drawer__close-btn')[0].className = 'el-drawer__close-btn';
                //显示基本信息内容
                bus.$emit('isQuestionnaireDetail', false);
            }
        }
    }
</script>

<style lang="less">

span:focus{
    outline-width: 0 !important;
    outline-style:none !important;
    outline-color:transparent !important;
}

button:focus{
    outline-width: 0 !important;
    outline-style:none !important;
    outline-color:transparent !important;
}

.hide_close_button{
    display:none;
}

.drawer_basic_info{
    .questionnaire_return{
        cursor: pointer;
        border-color:transparent;
        background-color:transparent;
        color:#72767b;
        font-size:16px;
        position: absolute;
        top: 17px;
        right: 29px;
        padding:0;
    }
    .el-drawer__container{
        .el-drawer{
            padding-top:55px;
            box-sizing:border-box;
            .el-drawer__header{
                display:none;
            }
            .el-drawer__body{
                .basic_info{
                    .el-row{
                        .el-col{
                           div:last-child{
                                bottom:99px !important;
                                .el-button{
                                    height: 32px;
                                    background-color: rgba(42, 130, 226, 1);
                                    border-radius: 16px;
                                    border-color:transparent;
                                    font-size: 13px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #FFFFFF;
                                    background-image:url('../assets/common/pen.svg');
                                    background-repeat:no-repeat;
                                    background-position:11px center;
                                    padding-left:27px;
                                    padding-right:13px;
                                    box-sizing:border-box;
                                }
                                .el-button:hover{
                                    background-color: rgba(42, 130, 226, 0.7);
                                }
                                .el-button:active{
                                    background-color: #1F6DC3;
                                }
                           } 
                        }
                    }
                }
            }
        }  
    }
}

</style>
